<template>
  <div id="box">
    <header id="header">
      <div class="back">
        <span @click="backList">&lt;</span>
      </div>
      <div class="sort">
        <div :class="{oraColor:zonghe}" @click="zonghe1()">综合</div>
        <div :class="{oraColor:xiaoliang}" @click="xiaoliang1()">
          销量
          <i class="switch"></i>
        </div>
        <div :class="{oraColor:jiage}" @click="jiage1()">
          价格
          <i class="switch"></i>
        </div>
      </div>
    </header>
    <main>
      <ul id="list">
        <li class="li" v-for="(item,index) in digi" :key="index" @click="toDetail(item.id)">
          <div class="img">
            <img :src="item.image" alt />
          </div>
          <div class="title">{{item.fullname}}</div>
          <div class="price">
            <p class="prc">
              <span>￥{{item.price}}</span>
              <del>￥{{item.marketPrice}}</del>
            </p>
            <div class="car" @click="toCart(item.id)"></div>
          </div>
        </li>
      </ul>
    </main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      digi: "",
      zonghe: true,
      xiaoliang: false,
      jiage: false
    };
  },
  methods: {
    toDetail(id) {
      this.$router.push({ path: "/detail", query: { id: id } });
    },
    backList() {
      // window.console.log(666);
      this.$router.push("/type");
    },
    async zonghe1() {
      this.zonghe = true;
      this.xiaoliang = false;
      this.jiage = false;
      let {
        data: {
          data: { total }
        }
      } = await this.$axios.get("http://localhost:1912/goods", {
        params: {
          num: 100,
          page: 1
        }
      });
      // window.console.log(total);
      this.digi = total;
    },
    async xiaoliang1() {
      this.zonghe = false;
      this.xiaoliang = true;
      this.jiage = false;

      let {
        data: { data }
      } = await this.$axios.get("http://localhost:1912/goods/sortlist", {
        params: {
          num: 1
        }
      });
      this.digi = data;
    },
    async jiage1() {
      this.zonghe = false;
      this.xiaoliang = false;
      this.jiage = true;

      let {
        data: { data }
      } = await this.$axios.get("http://localhost:1912/goods/sortlist", {
        params: {
          num: -1
        }
      });
      this.digi = data;
    },
    async toCart(id) {
      let phonenumber = this.$store.state.common.user.phone;
      if (phonenumber) {
        let a = await this.$axios.get("http://localhost:1912/cart/addcart", {
          params: {
            phonenumber: phonenumber,
            username: phonenumber,
            id: id
          }
        });
        if (a.data.code) {
          this.$store.dispatch("getGoodsList", { phonenumber });
        }
      } else {
        this.$router.path("/reg");
      }
    }
  },
  async created() {
    let {
      data: {
        data: { total }
      }
    } = await this.$axios.get("http://localhost:1912/goods", {
      params: {
        num: 100,
        page: 1
      }
    });
    // window.console.log(total);
    this.digi = total;
  }
};
</script>
<style lang="scss" scoped>
html,
body {
  height: 100%;
}

#box {
  height: 20rem;
  .switch {
    display: inline-block;
    width: 0.16rem;
    height: 0.213333rem;
    background: url(../images/Switch.png) center no-repeat;
    background-size: contain;
    // line-height: .32rem;
    position: absolute;
    right: 0;
    top: 35%;
    // margin-left: .213333rem;
  }

  .switchUp {
    display: inline-block;
    width: 0.16rem;
    height: 0.213333rem;
    background: url(../images/Switch_up.png) center no-repeat;
    background-size: contain;
    // line-height: .32rem;
    position: absolute;
    right: 0;
    top: 35%;
    // margin-left: .213333rem;
  }

  .switchDown {
    display: inline-block;
    width: 0.16rem;
    height: 0.213333rem;
    background: url(../images/switch_down.png) center no-repeat;
    background-size: contain;
    // line-height: .32rem;
    position: absolute;
    right: 0;
    top: 35%;
    // margin-left: .213333rem;
  }

  .oraColor {
    color: #ff5722;
  }

  // height: 100%;
  #header {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    margin-bottom: 0.666667rem;
    .back {
      width: 100%;
      height: 0.666667rem;
      background: #fff;
      box-sizing: border-box;
      padding-left: 0.4rem;
      border-bottom: 1px #ccc solid;
      box-shadow: 0 0.053333rem 0.4rem grey;
      span {
        font-size: 0.4rem;
        line-height: 0.666667rem;
        color: #666;
        cursor: pointer;
      }
    }
    .sort {
      height: 1.12rem;
      background: #fff;
      display: flex;
      justify-content: space-around;
      // box-sizing: border-box;

      div {
        // height: .32rem;
        font-size: 0.32rem;
        line-height: 1.12rem;
        position: relative;
        box-sizing: border-box;
        padding-right: 0.426667rem;
      }
    }
  }

  main {
    #list {
      width: 100%;
      // height: 100%;
      height: 20rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      background: #f6f6f6;
      box-sizing: border-box;
      padding: 1.066667rem 0.186667rem 0 0.186667rem;
      margin-top: 1.12rem;
      overflow-y: auto;

      .li {
        width: 46%; //353px
        // height: 3.066667rem;
        background: #fff;
        border-radius: 0.066667rem; //5px
        box-sizing: border-box;
        padding: 0.306667rem 0.186667rem; //23px 14px
        margin: 0.186667rem;
        // position: relative;

        .img {
          width: 85%;
          margin: 0 auto;

          img {
            display: block;
            width: 100%;
          }
        }

        .title {
          width: 100%;
          font-size: 0.32rem; //12px
          // line-height: .746667rem;
          // margin-bottom: 0.8rem; //8px
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-inline-box;
          -webkit-linr-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .price {
          width: 100%;
          height: 0.533333rem; //40px
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          margin-top: 0.625rem;
          position: relative;

          .prc {
            span {
              font-size: 0.346667rem;
              color: #ff5722;
            }

            del {
              color: #9e9e9e;
              font-size: 0.24rem;
            }
          }

          .car {
            width: 0.826667rem;
            height: 0.533333rem;
            background: url(../images/car_icon.png) center no-repeat;
            background-size: contain;
            cursor: pointer;
            position: absolute;
            // right: 0.186667rem;
            // bottom: 0.333333rem;
            right: 0.186667rem;
            top: 0;
          }
        }
      }
    }
  }
}
</style>